#box{
    width: 200px;
    height: 200px;
    margin:250px auto 100px auto;
    /*background: #ccc;*/
    position: relative;
    transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
    transform-style:preserve-3d;
}
@font-face {
    font-family: 'myArtFont';
    src: url('../images/art_font.ttf');
}
#box a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-weight: bolder;
    color: white;


}

#box div{
    width:100%;
    height:100%;
    -webkit-user-select:none;
    position: absolute;
    top:0;
    left: 0;
    background-size:cover;
    -webkit-box-shadow:0 0 100px #5fbcff;
    opacity: .9;
    font-size: 40px;
    font-family: myArtFont;
}
.front{
    transform:translateZ(100px);
    background-image: url("../images/a1.png");
    text-align: center;
    line-height: 200px;
}
.back{
    transform:translateZ(-100px);
    background-image: url("../images/a2.png");
    text-align: center;
    line-height: 200px;

}
.left{
    transform:translateX(-100px) rotateY(90deg);
    background-image: url("../images/a3.png");
    text-align: center;
    line-height: 200px;
}
.right{
    transform:translateX(100px) rotateY(90deg);
    background-image: url("../images/a4.png");
    text-align: center;
    line-height: 200px;
}
.lifangtop{
    transform:translateY(-100px) rotateX(90deg);
    background-image: url("../images/a5.png");
    text-align: center;
    line-height: 200px;
}
.bottom{
    transform:translateY(100px) rotateX(90deg);
    background-image: url("../images/a6.png");
    text-align: center;
    line-height: 200px;
}
@media (max-width: 800px){
    #box{
        display: none;
    }
    .dingwei{
        width: 250px;
        height: 400px;
        margin: 0 auto;
        bottom: 20%;
        left: calc(50% - 125px);
        position: absolute;

    }
    .btns{
        width: 250px;
        height: 400px;
        flex-direction: column;
        justify-content: space-around;
        align-content: space-around;
        flex-wrap: wrap;
    }


}